const component_wide_image = `
<div style="height: 100%;width: 100%;">
    <div style="height: 100%;width: 100%;" @click="dialogVisible=true">
        <el-carousel class=" border-editable" :interval="3000" arrow="always" height="500px" indicator-position="none">
            <el-carousel-item v-for="(item, index) in linkForm.linkArray" :key="index">
                <el-image fit="cover" :src="item.image_real" style="width:100%;height:100%">
                    <div slot="error" class="image-slot"></div>
                </el-image>
            </el-carousel-item>
        </el-carousel>
    </div>

    <!-- 图片选择区 -->
    <el-dialog title="选择广告图片" top="25vh" :visible.sync="dialogVisible" width="38%" :modal-append-to-body="false">
        <el-form inline size="mini" :model="linkForm" ref="left_left_links_form" >
            <div v-for="(link, index) in linkForm.linkArray" :key="index">
            <el-row type="flex" :gutter="10" align="middle" style="border-bottom: 1px solid #cac9c9; padding: 8px 5px;">
                <el-col :span="10">
                    <el-form-item label="跳转链接" :prop="'linkArray.' + index + '.url'" style="margin:0">
                        <el-input v-model="link.url" placeholder="跳转链接" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="7" style="text-align:center;" class="">
                    <el-form-item :prop="'linkArray.' + index + '.url'" style="margin:0;">
                        <el-upload style="margin:0;height:45px;" :headers="uploadHeader" action="/admin/upload/upload" :on-success="(response, file, fileList) => {uploadLeftRightSuccess(link, response, file, fileList)}" :multiple="false" :show-file-list="false">
                            <el-image v-if="link.image_real" :src="link.image_real" fit="contain" class="border-editable" style="height:100%" >
                                <div slot="error" class="image-slot"></div>
                            </el-image>
                            <i v-else class="el-icon-plus border-editable" style="font-size:40px;font-weight:100;padding:0 30px;"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :offset="1" :span="3" style="align-self:center">
                    <el-form-item style="margin:0">
                        <el-button size="mini" type="danger" @click.prevent="removeLeftLeftLink(index)">清除</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            </div>
        </el-form>
        <el-button @click="addLeftLeftLink" size="small" style="margin-top: 20px;">添加广告</el-button>
        
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSetImage" size="small">确 定</el-button>
        </span>
    </el-dialog>
</div>
`

Vue.component('wide-image', {
    props: {
        images: { type: Array, required: true },
    },
    data: function () {
        return {
            dialogVisible: false,
            linkForm: { linkArray: [] },
            uploadHeader: { Accept: 'application/json' },
        }
    },
    methods: {
        setLeftLeftImage() {
            this.dialogVisible = true
        },
        addLeftLeftLink() {
            this.linkForm.linkArray.push({ url: '', image: '' })
            this.$emit('change', this.linkForm.linkArray)
        },
        // 图片上传成功
        uploadLeftRightSuccess(link, response, file, fileList, parsm) {
            if (response.code == 10067) {
                const imageUrl = ns.img(response.data.pic_path)
                this.$set(link, 'image', response.data.pic_path)
                this.$set(link, 'image_real', imageUrl)
                this.$emit('change', this.linkForm.linkArray)
            }
        },
        handleSetImage() {
            this.$emit('change', this.linkForm.linkArray)
            this.dialogVisible = false
        },
        removeLeftLeftLink(index) {
            this.linkForm.linkArray.splice(index, 1)
            this.$emit('change', this.linkForm.linkArray)
        },
    },
    watch: {
        images: function (curr) {
            this.linkForm.linkArray = curr.map(item => {
                const image_real = item && item.image ? ns.img(item.image) : ''
                const { image, url } = item
                return { image, url, image_real }
            })
        },
    },
    template: component_wide_image,
})
